import { ProductImg } from '@/components/product/ProductImg';
import ProductTitle from '@/components/product/ProductTitle';
import { splitPrice } from '@/utils/customModule';
import { goProductDetail } from '@/utils/index';
import { View } from '@tarojs/components';
import classNames from 'classnames';
import React from 'react';
import { LimitDiscountsActivityPosition } from '../constants';
import Empty from '../Empty';
import Cart from './Cart';
import styles from './index.module.scss';
import ViewMore from './ViewMore';

const SplitPrice = ({ price }) => {
  const [priceLeft, priceRight] = splitPrice(price);

  return (
    <View className="sale-price customePageStyle">
      <View className="price-0">¥</View>

      <View className="price-1">{priceLeft}</View>

      <View className="price-2">.{priceRight}</View>
    </View>
  );
};

const NotStartProductInfo = ({
  product,

  isShowGoodsSaleNum,
  isCenter,
}) => {
  return (
    <>
      <ProductTitle className={classNames('title', { center: isCenter })} product={product} />

      {isShowGoodsSaleNum && (
        <View className="not-start">
          <View className="tag customePageStyleBg15">
            <View className="txt customePageStyle">限时抢</View>
          </View>
        </View>
      )}
    </>
  );
};

const StartProductInfo = ({
  product: { title, totalSales, totalStock } = {},
  isShowGoodsSaleNum,
}) => {
  return (
    <>
      <View className="name omit-1">{title}</View>
      {isShowGoodsSaleNum && (
        <>
          <View className="progress customePageStyleBg20">
            <View
              className="inner customePageBackgroundStyle"
              style={{
                width: `${(totalSales / totalStock) * 100}%`
              }}
            ></View>
          </View>

          <View className="sales">
            {totalSales >= totalStock ? '商品被抢光了~' : `已抢${totalSales}件`}
          </View>
        </>
      )}
    </>
  );
};

const Product = ({
  product,
  product: { releaseId, url, cost, price, totalSales, totalStock } = {},

  isShowSalePrice,
  isShowSoldOut,

  isShowGoodsSaleNum,
  isStart,

  isCenter,

  isShowCart,
  cartStyle,
}) => {
  return (
    <View className={styles.Product} onClick={() => goProductDetail({ id: releaseId, ...product })}>
      <ProductImg
        className="img"
        url={url}
        isSoldOut={isShowSoldOut && totalSales === totalStock}
      />

      <View className={classNames('product-info', { center: isCenter })}>
        {isStart && <StartProductInfo {...{ product, isShowGoodsSaleNum }} />}
        {!isStart && <NotStartProductInfo {...{ product, isShowGoodsSaleNum, isCenter }} />}
      </View>

      <View className={classNames('line', { center: isCenter })}>
        <View className="price">
          <SplitPrice price={price} />

          {isShowSalePrice && <View className="underline-price">¥{cost}</View>}
        </View>

        <Cart isShowCart={isShowCart} cartStyle={cartStyle} />
      </View>
    </View>
  );
};

const Products = ({
  activity,
  products,
  isShowSalePrice,
  isShowSoldOut,
  isShowGoodsSaleNum,
  isStart,

  isShowCart,
  cartStyle,
  activityPosition,
}) => {
  if (!products) {
    return <Empty txt="" />;
  }

  if (!products.length) {
    return <Empty />;
  }

  return (
    <View className={styles.Products}>
      {products?.map((product) => {
        return (
          <Product
            key={product.releaseId + '|' + product.variantId}
            {...{
              product,
              isShowSalePrice,
              isShowSoldOut,

              isShowGoodsSaleNum,
              isStart,

              isCenter: activityPosition === LimitDiscountsActivityPosition.center,

              isShowCart,
              cartStyle,
            }}
          />
        );
      })}

      <ViewMore {...{ activity, products }} />
    </View>
  );
};

export default Products;
